<template>
  <div class="wrapper">
    <ul class="list">
      <li v-for="(item,index) in dataList" :key="index">
        <p class="detail" :class="{reject:item.status == 2}">{{item.detail}}</p>
        <p class="text" v-if="item.time">{{item.time}}</p>
        <p class="text" v-if="item.remark">{{item.remark}}</p>
        <div class="status status1" v-if="index == 0">
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/sel.png">
        </div>
        <div class="status status2" v-if="index == 1" :class="{status3: item.status != 0}">
          <img v-if="item.status == 0" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/money1.png">
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/money2.png" v-else>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {

    data() {
      return {
        withdrawApplicationId: '',
        dataList: []
      }
    },

    mounted() {

    },
    onLoad(options) {
      this.withdrawApplicationId = options.withdrawApplicationId
      this.getBondDetail()
    },

    methods: {
      getBondDetail() {
        let params = {
          withdrawApplicationId: this.withdrawApplicationId
        }
        Service.getBondDetail(params)
          .then((res) => {
            if (res.code == 200) {
              this.dataList = res.data
            }
          })
      },
    }
  }
</script>

<style scoped>

  .list {
    padding: 62px 90px 0 0;
  }
  .list li {
    position: relative;
    padding-left: 114px;
    padding-bottom: 70px;
  }
  .detail{
    font-size:32px;
    color:rgba(51,51,51,1);
    line-height:45px;
  }
  .reject{
    color: #FF3939
  }
  .text{
    padding-top: 10px;
    font-size:26px;
    color:rgba(153,153,153,1);
    line-height:37px;
  }
  .status{
    position: absolute;
    top:0;
    left: 39px;
  }
  .status img{
    width: 40px;
    height: 40px;
    vertical-align: top;
  }
  .status1:after{
    content: '';
    position: absolute;
    top: 40px;
    left: 19px;
    width:4px;
    height:61px;
    background:rgba(254,209,48,1)
  }
  .status2:before{
    content: '';
    position: absolute;
    bottom: 40px;
    left: 19px;
    width:4px;
    height:62px;
    background:#E2E2E2
  }
  .status3:before{
    background:rgba(254,209,48,1)
  }
</style>
